<template>
  <el-collapse v-model="openedCollapse">
    <el-collapse-item title="内容设置" name="config">
      <el-form>
        <el-form-item label="时间范围">
          <el-radio-group
            v-model="params.hours"
            @change="refreshCalculatedSource"
          >
            <el-radio :label="24">近 24 小时</el-radio>
            <el-radio :label="36">近 36 小时</el-radio>
            <el-radio :label="48">近 48 小时&nbsp;*</el-radio>
            <el-radio :label="96">近 96 小时</el-radio>
            <el-radio :label="8760" v-if="!params.ignoreUser"
              >近 365 天</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="记录人员">
          <el-radio-group
            v-model="params.ignoreUser"
            @change="refreshCalculatedSource"
          >
            <el-radio :label="false">仅限您&nbsp;*</el-radio>
            <el-radio :label="true" v-if="params.hours < 8760"
              >所有记录人</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item title="纠违记录" name="rectify">
      <rectify-table
        :source="calculatedSource.rectifySource"
        :hours="params.hours"
        v-if="calculatedSource.status"
      />
    </el-collapse-item>
    <el-collapse-item title="检查记录" name="inspect">
      <inspect-table
        :source="calculatedSource.inspectSource"
        :hours="params.hours"
        v-if="calculatedSource.status"
      />
    </el-collapse-item>
    <el-collapse-item
      title="userInfo"
      name="userInfo"
      v-if="params.debug.enable"
    >
      <pre>realUser:&nbsp;{{ userInfo }}<br />fakeUser:&nbsp;{{ params.debug.fakeUser }}</pre>
    </el-collapse-item>
    <el-collapse-item
      title="rectifySource"
      name="rectifySource"
      v-if="params.debug.enable"
    >
      <pre>{{ rectifySource }}</pre>
    </el-collapse-item>
    <el-collapse-item
      title="inspectSource"
      name="inspectSource"
      v-if="params.debug.enable"
    >
      <pre>{{ inspectSource }}</pre>
    </el-collapse-item>
    <el-collapse-item
      title="calculatedSource"
      name="calculatedSource"
      v-if="params.debug.enable"
    >
      <pre>{{ calculatedSource }}</pre>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import InspectTable from "./components/inspectTable";
import RectifyTable from "./components/rectifyTable";
export default {
  components: {
    InspectTable,
    RectifyTable,
  },
  computed: {
    rectifySource() {
      return this.$store.state.summary.rectifySource;
    },
    inspectSource() {
      return this.$store.state.summary.inspectSource;
    },
    userInfo() {
      // { name, number, passwd }
      return this.$store.getters.userbase;
    },
  },
  data() {
    return {
      params: {
        hours: 48,
        intervalMinutes: 5,
        ignoreUser: false,
        debug: {
          enable: false,
          fakeUser: {
            name: "*",
          },
          eventTime: new Date(),
        },
      },
      calculatedSource: {
        status: false,
        timer: null,
        rectifySource: [],
        inspectSource: [],
      },
      openedCollapse: ["rectify", "inspect"],
    };
  },
  methods: {
    refreshCalculatedSource() {
      this.calculatedSource.status = false;
      this.calculatedSource.rectifySource = [];
      this.calculatedSource.inspectSource = [];
      for (let i = 0; i < this.rectifySource.length; i++) {
        if (
          this.rectifySource[i].userName == this.userInfo.name ||
          this.rectifySource[i].userName == this.params.debug.fakeUser.name ||
          this.params.ignoreUser
        ) {
          let eventTime = new Date(this.rectifySource[i].eventTime).getTime();
          if (
            eventTime >=
            new Date().getTime() - this.params.hours * 3600 * 1000
          ) {
            this.calculatedSource.rectifySource.push(this.rectifySource[i]);
          }
        }
      }
      for (let i = 0; i < this.inspectSource.length; i++) {
        if (
          this.inspectSource[i].userName == this.userInfo.name ||
          this.inspectSource[i].userName == this.params.debug.fakeUser.name ||
          this.params.ignoreUser
        ) {
          let eventTime = new Date(this.inspectSource[i].time).getTime();
          if (
            eventTime >=
            new Date().getTime() - this.params.hours * 3600 * 1000
          ) {
            this.calculatedSource.inspectSource.push(this.inspectSource[i]);
          }
        }
      }
      this.$nextTick(() => {
        this.calculatedSource.status = true;
      });
    },
  },
  mounted() {
    this.refreshCalculatedSource();
    let self = this;
    this.calculatedSource.timer = setInterval(() => {
      self.refreshCalculatedSource();
    }, self.params.intervalMinutes * 60000);
  },
  beforeDestroy() {
    clearInterval(this.calculatedSource.timer);
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  /* width: 90px; */
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  /* width: 50%; */
  min-width: 50%;
  max-width: 100%;
}
</style>
